<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <div class="left-div">
        <canvas id="my-canvas" class="my-canvas"></canvas>
    </div>
    <div class="right-div">
        <div>
            A0: x: <input disabled id="a0_x" type="text" th:value="${base.getA0_x()}"/> y: <input disabled id="a0_y"
                                                                                                  type="text"
                                                                                                  th:value="${base.getA0_y()}"/>
        </div>
        <div style="margin-top: 10px;">
            A1: x: <input disabled id="a1_x" type="text" th:value="${base.getA1_x()}"/> y: <input disabled id="a1_y"
                                                                                                  type="text"
                                                                                                  th:value="${base.getA1_y()}"/>
        </div>
        <div style="margin-top: 10px;">
            A2: x: <input disabled id="a2_x" type="text" th:value="${base.getA2_x()}"/> y: <input disabled id="a2_y"
                                                                                                  type="text"
                                                                                                  th:value="${base.getA2_y()}"/>
        </div>
        <div style="margin-top: 10px;">
            标签: x: <span id="t_x">0.00</span> &nbsp;&nbsp;&nbsp;y: <span id="t_y">0.00</span>
        </div>
        <div style="margin-top: 10px;">
            <input type="button" value="打开连接" onclick="openWebSocket()"/>
        </div>
    </div>
</head>
<style>
    .my-canvas {
        background-color: antiquewhite;
    }

    .left-div {
        width: 800px;
        height: 800px;
        float: left;
    }

    .right-div {
        width: 580px;
        height: 600px;
        float: right;
    }
</style>
<body>
<script type="text/javascript" th:inline="javascript">

    //坐标倍数
    let enlarge = 30;
    let offset_x = 30;
    let offset_y = 290;
    //基站坐标
    let a0_x = document.getElementById("a0_x").value * enlarge + offset_x;
    let a0_y = document.getElementById("a0_y").value * enlarge + offset_y;
    let a1_x = document.getElementById("a1_x").value * enlarge + offset_x;
    let a1_y = document.getElementById("a1_y").value * enlarge + offset_y;
    let a2_x = document.getElementById("a2_x").value * enlarge + offset_x;
    let a2_y = document.getElementById("a2_y").value * enlarge + offset_y;
    //获取画布
    const canvas = document.getElementById('my-canvas');
    canvas.width = "800";
    canvas.height = "800";
    const ctx = canvas.getContext('2d');
    ctx.font = "10px sans-serif";
    //画布反转
    // ctx.translate(0, canvas.height);
    // ctx.scale(1, -1);

    let background = new Image();
    background.src = "http://47.102.156.110/demo/images/3ccda24a-a4a6-4759-9597-1cc5bd06deb1.png";

    let raf;
    let ball = {
        x: 0,
        y: 0,
        draw: function () {
            //图片实际宽高 1409 2591 缩小3.3倍
            ctx.drawImage(background, 0, 0, 1409 / 3.3, 2591 / 3.3);

            //基站0
            ctx.fillStyle = "#FF0000";
            ctx.beginPath();
            ctx.arc(a0_x, a0_y, 5, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
            ctx.fillText("A0", a0_x + 8, a0_y + 13);

            //基站1
            ctx.fillStyle = "#FF0000";
            ctx.beginPath();
            ctx.arc(a1_x, a1_y, 5, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
            ctx.fillText("A1", a1_x + 8, a1_y + 13);

            //基站2
            ctx.fillStyle = "#FF0000";
            ctx.beginPath();
            ctx.arc(a2_x, a2_y, 5, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
            ctx.fillText("A2", a2_x + 8, a2_y + 13);

            //标签
            ctx.beginPath();
            ctx.arc(this.x, this.y, 8, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fillStyle = '#1E90FF';
            ctx.fill();
        }
    };

    function draw() {
        //清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        //重新绘制标签
        ball.draw();
        //更新动画
        raf = window.requestAnimationFrame(draw);
    }
    openWebSocket = function () {
        let socket;
        if (typeof (WebSocket) == "undefined") {
            alert("您的浏览器不支持WebSocket")
        } else {
            let socketUrl = "ws://localhost:8080/location";
            socket = new WebSocket(socketUrl);
            //连接事件
            socket.onopen = function () {
                console.log("websocket连接成功");
            };
            //接收消息事件
            socket.onmessage = function (msg) {
                let data = JSON.parse(msg.data);
                let x = data.x;
                let y = data.y;
                document.getElementById("t_x").innerText = x;
                document.getElementById("t_y").innerText = y;
                x *= enlarge;
                y *= enlarge;
                x += offset_x;
                y += offset_y;
                ball.x = x;
                ball.y = y;
                //绘制标签
                draw();
            };
        }
    }
</script>
</body>
</html>
